<template>
  <figure class="saturn">
    <span class="rings"></span>
  </figure>
</template>

<style lang="scss" scoped>
.saturn {
  width: 20em;
  height: 20em;
  font-size: 15px;
  transform: rotate(-15deg);
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 9em;
    height: 9em;
    background: radial-gradient(transparent 62%, black),
      linear-gradient(
        rgba(212, 203, 174, 1) 0%,
        rgba(212, 203, 174, 1) 10%,
        rgba(221, 203, 157, 1) 15%,
        rgba(221, 203, 157, 1) 17%,
        rgba(213, 181, 143, 1) 22%,
        rgba(213, 181, 143, 1) 26%,
        rgba(208, 180, 158, 1) 32%,
        rgba(208, 180, 158, 1) 36%,
        rgba(218, 188, 162, 1) 37%,
        rgba(218, 188, 162, 1) 39%,
        rgba(211, 184, 157, 1) 41%,
        rgba(211, 184, 157, 1) 49%,
        rgba(205, 186, 156, 1) 51%,
        rgba(205, 186, 156, 1) 52%,
        rgba(202, 176, 153, 1) 53%,
        rgba(202, 176, 153, 1) 65%,
        rgba(190, 177, 145, 1) 68%,
        rgba(190, 177, 145, 1) 80%,
        rgba(150, 144, 130, 1) 91%,
        rgba(150, 144, 130, 1) 95%,
        rgba(131, 129, 117, 1) 97%,
        rgba(131, 129, 117, 1) 100%
      );
    border-radius: 50%;
    left: calc((20em - 9em) / 2);
    top: calc((20em - 9em) / 2);
  }

  &::before {
    clip-path: inset(50% 0 0 0);
  }

  &::after {
    clip-path: inset(0 0 50% 0);
  }

  .rings {
    left: 0;
    top: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    background: radial-gradient(
      rgba(24, 19, 25, 0) 0%,
      rgba(53, 52, 51, 0) 34%,
      rgba(55, 54, 52, 1) 36%,
      rgba(56, 55, 53, 1) 37%,
      rgba(68, 67, 66, 1) 40%,
      rgba(56, 55, 53, 1) 41%,
      rgba(88, 87, 76, 1) 42%,
      rgba(88, 87, 76, 1) 44%,
      rgba(113, 110, 103, 1) 46%,
      rgba(113, 110, 103, 1) 48%,
      rgba(113, 98, 93, 1) 49%,
      rgba(113, 98, 93, 1) 51%,
      rgba(113, 98, 93, 1) 53%,
      rgba(113, 98, 93, 1) 54%,
      rgba(122, 115, 105, 1) 55%,
      rgba(106, 99, 89, 1) 56%,
      rgba(106, 99, 89, 1) 58%,
      rgba(79, 76, 76, 0) 60%,
      rgba(79, 76, 76, 1) 61%,
      rgba(65, 64, 70, 1) 62%,
      rgba(90, 85, 89, 1) 63%,
      rgba(78, 73, 74, 1) 65%,
      rgba(78, 74, 73, 1) 67%,
      rgba(78, 73, 74, 0) 68%,
      rgba(78, 73, 75, 1) 69%,
      rgba(78, 73, 75, 1) 70%,
      rgba(78, 73, 76, 0) 71%,
      rgba(77, 72, 72, 0) 72%,
      rgba(24, 19, 25, 0) 100%
    );
    transform: rotateX(75deg);
  }
}
</style>
